﻿<template>
  <div class="git_Exchange_contain" ref="git_contain">
    <Header_other v-bind:header_name="header_name" ref="header"></Header_other>
    <div class="main_container"  ref="main_container">
      <!--<div class="main_container_header clearfix">
          <div class="main_container_header_act">通知</div>
          <div class="">背影寻人</div>
          <div class="">求助信息</div>
          <div class="">私信</div>
          <img src="../../static/img/nav_fenhao.png" class="wenhao_img">
      </div>-->
      <!-- scroll_wrap -->
      <div id="wrap_scroller">
        <scroller :on-refresh="refresh"
                  :on-infinite="infinite" class="clearfix" ref="myscroller">
          <!-- content goes here -->
          <div class="" ref="el" id="scroller">
            <!-- content goes here -->
            <!-- box -->
            <div class="Letter_box clearfix" v-for="info in menu_list" :key="info.id">
              <div class="letter_box_header_wrap clearfix">
                <!--<img src=
                     '{info.sendUser.image == null||info.sendUser.image == undefined?"../../static/img/bg_all.png?1":info.sendUser.image}'
                     class="letter_box_head">-->
                <img v-bind:src="info.sendUser.image" class="letter_box_head">
                <div class="leftter_box_right">
                  <div class="bz_nane">
                    {{info.sendUser.penName}}
                  </div>
                  <div class="letter_box_id">
                    ID:{{info.sendUser.ident}}
                  </div>
                </div>
                <div class="letter_box_right_btn">
                  <!--<div class="btn_base">加好友</div>
                  <div class="btn_base gz_btn">关注</div>
                  <div class="btn_base">回信</div>-->
                </div>
              </div>
              <div class="Letter_box_letter">
                {{info.content}}
              </div>
            </div>

            <!-- box -->
            <!-- box -->
            <!--<div class="Letter_box clearfix">
              <div class="letter_box_header_wrap clearfix">
                <img src="../../static/img/bg_all.png" class="letter_box_head">
                <div class="leftter_box_right">
                  <div class="bz_nane">
                    李萍
                  </div>
                  <div class="letter_box_id">
                    ID:1018020
                  </div>
                </div>
                <div class="letter_box_right_btn">
                  <div class="btn_base">加好友</div>
                  <div class="btn_base gz_btn">关注</div>
                  <div class="btn_base">回信</div>
                </div>
              </div>
              <div class="Letter_box_letter">
                Nice to meet you！
                披荆斩棘只为遇见你，用情地动你！
                随风而遇！浪漫有你！
              </div>
            </div>-->
            <!-- box -->
          </div>
        </scroller>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  import Header_other from "../header_other/Header_other.vue";
  //limit_Scroll
  //import limit_scroll from "../../static/js/limit_scroll.js"
  var qs = require('qs');
  //axios.post('/foo', qs.stringify({ 'bar': 123 }));

  export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        show_layer:false,
        get_layer_show: this.$store.getters.get_layer_show,
        layer_show: false,
        header_name: "收件箱",
        layer_give_friend_data: false,
        give_other_data: false,
        this_box_msg: {},
        menu_list: [],
        pageNo: 1,
        pageSize: 10,
        first_flag:false
      }
    },
    ...mapActions([
      "thom_redirect",
    ]),
    ...mapMutations([
      "Change_certain_layer"
    ]),
    mounted: function () {
      let wish_header = window.getComputedStyle(this.$refs.header.$el, "height").height.replace("px", "");
      let main_h = document.body.clientHeight;

      this.$refs.main_container.style.height = main_h - parseInt(wish_header) + "px";


    },
    methods: {
      ...mapGetters([
        "get_ajax_base"
      ]),
      //上拉 获取数据
      get_data: function (resolve,reject) {
        this.$http.get('/yizhiweimen/api/user/sendInfo/getSendInfosByRid?rid=' + sessionStorage.getItem("user_id") + '&pageNo=' + this.pageNo + '&pageSize=' + this.pageSize)
          .catch((thrown) => {
            console.log(thrown)
            reject();
          }).then((e) => {

          resolve(e.data);

        })
      },
      //下拉
      refresh: function (done) {
//        this.pageNo = 1;
//        this.pageSize = 10;
//        this.first_flag = false;
//
//        this.$http.get('/yizhiweimen/api/user/sendInfo/getSendInfosByRid?rid=' + sessionStorage.getItem("user_id")+'&pageNo=1&pageSize=10')
//          .catch((thrown) => {
//            console.log(thrown)
//          }).then((e) => {
//          this.menu_list = e.data
//          setTimeout(() =>{
//            done();
//          },400)
//        })
      },
      //上啦
      infinite: function (done) {
//        if (this.first_flag == false) {
//          this.pageNo = 1;
//        } else {
//          this.pageNo += 1;
//        }
//
//        let myFirstPromise = new Promise((resolve, reject) => {
//          this.get_data(resolve, reject);
//        });
//
//        myFirstPromise.then((successMessage) => {
//          // console.log("promise___fuck_you_bitch");
//          //successMessage的值是上面调用resolve(...)方法传入的值.
//          //successMessage参数不一定非要是字符串类型，这里只是举个例子
//          //如果 没有返回值就是 到底了 没有数据了 我日
//          if (successMessage.length == 0 || successMessage == "" || successMessage == undefined || successMessage.length < 10) {
//            done()
//            this.$refs.myscroller.finishInfinite(2);
//          } else {
//            done()
//            //this.$refs.myscroller.finishInfinite(2);
//            for (let x = 0; x < successMessage.length; x++) {
//              this.menu_list.push(successMessage[x])
//            }
//            this.menu_list.concat(successMessage)
//          }
//        })
//          .catch(
//            // Log the rejection reason
//            (reason) => {
//              console.log('Handle rejected promise (' + reason + ') here.');
//            });
//
//        if (this.first_flag == false) {
//          this.first_flag = true;
//        }
      },
      //弹出层
      layer_give_friend_f: function () {
        this.layer_give_friend_data = !this.layer_give_friend_data;
      },
      give_other: function () {
        this.give_other_data = !this.give_other_data
      },
      hide_detail_1: function () {
        this.layer_show = false;
      },
      //页面跳转
      goTo: function () {
        this.$store.dispatch("thom_redirect",{name:"/letter/SucLetter",router:this.$router});
      },
      open_certain_btn:function () {
        //show_layer 判断显示
        this.$store.dispatch("thom_redirect",
          {
            name:"/Index_main/Wrap_certain_layer/Certain_layer_input",router:this.$router
          });
      },
      goTo_letter_man:function() {
        this.$store.dispatch("thom_redirect",
          {
            name: "/Letter_man", router: this.$router
          });
      }
    },
    components: {
      Header_other
    }
  }
</script>
<style>
  .header_other{
    position:fixed;
  }
</style>
<style scoped>
  .Letter_box_letter{
    text-align:center;
    color:#9f5c2f;
    font-size:0.7rem;
    background-color:#fff;
    padding:1.3rem 3.2rem;
    border-radius:2vw;
    width:61%;
    margin-bottom:1rem;
    box-shadow:2px 2px 4px 2px rgba(180, 180, 180, 0.62);
    margin-top:0.2rem;
  }
  .letter_box_right_btn .gz_btn {
    color: #fff;
    background-color: #9f5c2f;
  }
  .btn_base {
    float: left;
    padding: 0.2rem 0.5rem;
    font-size: 0.6rem;
    margin-top: 1.15rem;
    border: 2px solid #9f5c2f;
    color: #9f5c2f;
    border-radius: 1.2vw;
    margin-right: 0.1rem;
    text-align: center;
  }
  .letter_box_right_btn {
    float: right;
  }
  .Letter_box {
    width: 90%;
    margin: 1rem auto 0;
  }
  .letter_box_id {
    font-size: 0.7rem;
    color: #9f5c2f;
    margin-left:0.2rem;
    margin-top:0.1rem;
  }
  .leftter_box_right {
    float: left;
  }
  .bz_nane {
    padding: 0.35rem 0.75rem;
    background-color: #9f5c2f;
    border-radius: 1vw;
    color: #fff;
    text-align: center;
    font-size: 0.6rem;
    margin-left: 0.2rem;
    width:50%;
    letter-spacing:1px;

  }
  .letter_box_head {
    display: block;
    width: 2rem;
    height: 2rem;
    float: left;
    border-radius: 1vw;
  }
  #wrap_scroller {
  //transform:translateY(20px);
    height: 100%;
  }
  .box_bottom_wrap {
    margin-top: 0.3rem;
    padding-left: 5%;
    padding-right: 5%;
  }
  .m_L_15 {
    margin-left: 2vw;
  }
  .box_bottom_wrap .red_c {
    color: #e85454;
    border: 2px solid #e85454;
  }
  .box_base_btn {
    width: 20%;
    font-size: 0.7rem;
    height: 1.25rem;
    line-height: 2;
    border-radius: 2vw;
    border: 2px solid #9f5c2f;
    color: #9f5c2f;
  }
  .box_list li {
    width: 48%;
  }
  .box_list {
    border-radius:2vw;
    background-color: #eeeeee;
    flex-wrap: wrap;
    font-size: 0.7rem;
    line-height: 2.45rem;
    width: 11.75rem;
    display: flex;
  }
  .box_header_wrap {
    padding-left:1.4vw;
    padding-top:0.35rem;
    display: flex;
    justify-content: space-between;
  }
  .bor_bot {
    border-bottom: 1px solid #dfdfdf
  }
  .border_L {
    border-right: 1px solid #dfdfdf;
  }
  .box_img_s {
    display:block;
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 2vw;
    border: 2px solid #e9c7ac;
  }
  .box {
    height: 7.5rem;
    width: 93%;
    background-color: #fff;
    border-radius: 2vw;
    margin: 0.6rem auto;
    box-shadow: 0 2px 8px 2px rgba(180, 180, 180, 0.62);
  }
  .wenhao_img {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    top: 50%;
    right: 2vw;
    transform: translateY(-50%);
  }
  .main_container {
    height:100%;
    background-color: #eeeeee;
  }
  .main_container_header {
    position:relative;
    height: 1.75rem;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    /*justify-content:space-between;*/
    font-size: 0.7rem;
    line-height: 2.6;
    color: #b4b4b4;
  }
  .main_container_header_act {
    color: #9f5c2f;
  }
  ._v-container{
    top:none;
    position:relative;
  }
  .git_Exchange_contain{
    height:100%;
  }
</style>
